<template>
    <!--  顶部logo+菜单      -->
    <div class="topnav">
        <div class="logo">
            <router-link to="/">
                <img style="width: 40px;height: 40px;" src="../assets/logo.svg" alt="">
            </router-link>
        </div>
        <ul class="menu">
            <li>
              <a class="btn-div" href="https://gitee.com/Rulyc/lucky-ui/tree/master/">码云</a>
            </li>
            <li>
              <router-link to="/doc/intro">文档</router-link>
            </li>
        </ul>
        <span v-if="toggleMenuVisible"  class="toggleMenu" @click="toggleMenu">
        </span>
    </div>
</template>
<script lang="ts">
    import { inject, Ref } from 'vue'
    export default {
        name: "TopNav",
        props:{
            toggleMenuVisible:{
                type: Boolean,
                default: false
            }
        },
        setup(){
            const menuVisible = inject<Ref<boolean>>('menuVisible') // get到 menuVisible
            console.log(menuVisible.value,'topNav获取的值')
            const toggleMenu = ()=>{
               menuVisible.value = !menuVisible.value
            }
            return { toggleMenu }
        }
    }
</script>

<style lang="scss" scoped>
    .topnav {
        color: #67C23A;
        box-shadow: 0 0 1px rgba(0,0,0,0.25);
        transition: background-color 0.3s ease-in-out;
        display: flex;
        padding: 16px 22px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index:20;
        background: #ffffff;
        > .logo {
            max-width: 10em;
            margin-right: auto;
            height: 30px;
            line-height: 30px;
        }
        > .menu {
            display: flex;
            white-space: nowrap;
            flex-wrap: nowrap;
            > li {
                margin: 0 1em;
            }
        }
        .toggleMenu{
            display: none;
            width: 24px;
            height: 24px;
            top: 8px;
            left: 18px;
            background: url(../assets/img/menu.png) center center no-repeat;
            background-size: 24px;
            position: absolute;
            left:16px;
            top:50%;
            transform: translateY(-50%);
        }
        @media(max-width:500px){
            >.menu{
                display: none;
            }
            > .logo{
                margin:0 auto;
            }
            >.toggleMenu{
                display: inline-block;
            }
        }
    }
</style>
